<template>
  <a-modal v-model:open="open" title="历史记录" :mask-closable="false" :width="1000">
    <a-table
      :columns="columns"
      size="small"
      :dataSource="List"
      :pagination="pagination"
      :loading="loading"
      :scroll="{ y: 250 }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'rsltFlg'">
          <span v-if="!record.rsltFlg">-</span>
          <span v-else style="color: red">{{ record.rsltFlg == 1 ? '↑' : '↓' }}</span>
        </template>
        <template v-else-if="column.dataIndex === 'peItmRslt'">
          <span v-if="peHisData.peItemTypeName == '辅助检查'">{{ record.peItmRslt }}</span>
          <span v-else :style="{ color: record.nmlFlg == '0' ? 'red' : '' }">{{
            record.peItmRslt
          }}</span>
        </template>
        <template v-else-if="column.dataIndex === 'peDptSmry'">
          <pre
            :style="{
              'margin-bottom': 0,
              'font-size': '14px',
              fontFamily: 'Arial',
              'word-wrap': 'break-word',
              'white-space': 'pre-wrap',
              color: record.nmlFlg == '0' ? 'red' : 'rgba(0, 0, 0, 88%)'
            }"
            >{{ record.peDptSmry }}</pre
          >
        </template>
      </template>
    </a-table>
    <template v-if="isShowChat">
      <div class="chart-label-title">
        <span>{{ chartTitle }}</span>
      </div>
      <div class="chart-box">
        <div id="history-chart" />
      </div>
    </template>
    <template #footer>
      <a-button @click="open = false">关闭</a-button>
    </template>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import * as echarts from 'echarts'
import { getPeHistory } from './peHistory'
import dayjs from 'dayjs'

const open = ref<boolean>(false)
const isShowChat = ref<boolean>(false)
let myChart: any = undefined
const loading = ref<boolean>(true)
const List = ref([])
const chartTitle = ref('')
const chartUnit = ref('')

const peHisData = ref<any>({})

const columns = ref<any[]>([])
const checkColumns = ref<any[]>([
  {
    title: '体检时间',
    dataIndex: 'examDt',
    key: 'examDt',
    align: 'left'
  },
  {
    title: '项目名称',
    dataIndex: 'peItmNm',
    key: 'peItmNm',
    align: 'left'
  },
  {
    title: '结果',
    dataIndex: 'peItmRslt',
    key: 'peItmRslt',
    align: 'left'
  },
  {
    title: '提示',
    dataIndex: 'rsltFlg',
    key: 'rsltFlg',
    align: 'left'
  },
  {
    title: '单位',
    dataIndex: 'rsltMtgUnt',
    key: 'rsltMtgUnt',
    align: 'left'
  },
  {
    title: '参考范围',
    dataIndex: 'rfrcVlu',
    key: 'rfrcVlu',
    align: 'left'
  }
])

const inspectColumns = ref<any[]>([
  {
    title: '体检时间',
    dataIndex: 'examDt',
    key: 'examDt',
    align: 'left'
  },
  {
    title: '检查项目名称',
    dataIndex: 'peItmNm',
    key: 'peItmNm',
    align: 'left'
  },
  {
    title: '检查所见',
    dataIndex: 'peItmRslt',
    key: 'peItmRslt',
    align: 'left'
  },
  {
    title: '检查结论',
    dataIndex: 'peDptSmry',
    key: 'peDptSmry',
    align: 'left'
  }
])

const pagination = ref({
  // defaultPageSize: 5
  current: 1,
  pageSize: 10,
  onChange: (current, size) => {
    pagination.value.current = current
    pagination.value.pageSize = size
  },
  showQuickJumper: true
})

const init = (data: any, type: string, empi: any, reportNo: any) => {
  columns.value = type === '其他辅助检查' ? inspectColumns.value : checkColumns.value
  open.value = true
  peHisData.value = data
  chartTitle.value = data.peItemName
  chartUnit.value = data.peItemResultUnit
  loading.value = true
  console.log(data)
  if (/^[+-]?\d+(\.\d+)?$/.test(data.peItemResult)) {
    isShowChat.value = true
  } else {
    isShowChat.value = false
  }
  let peItemType: any = ''
  switch (type) {
    case '体格检查':
      peItemType = 'GENERAL'
      break
    case '实验室检查':
      peItemType = 'TEST'
      break
    case '其他辅助检查':
      peItemType = 'EXAM'
      break
    default:
      break
  }

  const params = {
    pid: empi,
    peItmCd: data.peItemCode,
    peItemType: peItemType,
    reportNo: reportNo
  }
  getPeHistory(params)
    .then((res: any) => {
      loading.value = false
      List.value = res.data

      if (isShowChat.value) {
        nextTick(() => {
          initChart(res.data)
        })
      }
    })
    .catch(() => {
      loading.value = false
    })
}

const initChart = (data: any) => {
  const dom: any = document.getElementById('history-chart')
  myChart = echarts.getInstanceByDom(dom)
  if (!myChart) {
    myChart = echarts.init(dom)
  }

  const xAxisData: any = []
  const seriesData: any = []

  data.reverse().forEach((item: any) => {
    xAxisData.push(item.examDt)
    seriesData.push(Number(item.peItmRslt))
  })

  const option = {
    tooltip: {
      trigger: 'axis'
    },
    color: ['#FFCF41'],
    grid: {
      left: '3%',
      right: '2%',
      bottom: '0%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLine: {
        onZero: false,
        lineStyle: {
          color: '#C9CDD4'
        }
      },
      axisTick: {
        alignWithLabel: true,
        inside: true
      },
      axisLabel: {
        formatter: function (value: any) {
          return dayjs(value).format('YY.MM.DD')
        },
        color: '#4E5969'
      }
    },

    yAxis: {
      type: 'value',
      name: '单位：' + chartUnit.value
    },
    series: [
      {
        name: chartTitle.value,
        type: 'line',
        data: seriesData,
        smooth: true,
        symbolSize: 8,
        symbol: 'circle',
        label: {
          show: true,
          position: 'top'
        },
        lineStyle: {
          width: 2
        }
      }
    ]
  }

  myChart.setOption(option)
}

defineExpose({
  init
})
</script>
<style lang="less" scoped>
.chart-box {
  width: 100%;
  height: 300px;
}

#history-chart {
  width: 100%;
  height: 280px;
}

.tips {
  display: inline-block;

  .on {
    color: #f53f3f;
    transform: rotate(180deg);
  }

  .active {
    color: #f53f3f;
  }
}

.chart-label-title {
  padding: 8px 16px;
  margin-top: 24px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
  background: #f7f8fa;
}
</style>
